<template>
    <div class="left_nav">
        <div class="top_title">
            <h2> <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>外卖商家中心
            </h2>
        </div>
        <el-menu router unique-opened :default-active="$route.path" background-color="#545c64" text-color="#fff"
            active-text-color="#ffd04b">

            <!-- 后台首页 -->
            <el-menu-item index="/index">
                <i class="el-icon-house"></i>
                <span slot="title">后台首页</span>
            </el-menu-item>


            <!-- 订单管理 -->
            <el-menu-item index="/order">
                <i class="el-icon-document"></i>
                <span slot="title">订单管理</span>
            </el-menu-item>


            <!-- 商品管理 -->
            <el-submenu index="/goods">
                <template slot="title">
                    <i class="el-icon-shopping-bag-1"></i>
                    <span>商品管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="/goods/add">添加商品</el-menu-item>
                    <el-menu-item index="/goods/list">商品列表</el-menu-item>
                    <el-menu-item index="/goods/category">商品分类</el-menu-item>
                </el-menu-item-group>
            </el-submenu>


            <!-- 店铺管理 -->
            <el-menu-item index="/shop">
                <i class="el-icon-s-shop"></i>
                <span slot="title">店铺管理</span>
            </el-menu-item>


            <!-- 账号管理 -->
            <el-submenu index="/account">
                <template slot="title">
                    <i class="el-icon-user-solid"></i>
                    <span>账号管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="/account/add">添加账号</el-menu-item>
                    <el-menu-item index="/account/list">账号列表</el-menu-item>
                    <el-menu-item index="/account/changepassword">修改密码</el-menu-item>
                </el-menu-item-group>
            </el-submenu>

            <!-- 销售统计 -->
            <el-submenu index="/count">
                <template slot="title">
                    <i class="el-icon-pie-chart"></i>
                    <span>销售统计</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="/count/goods">商品统计</el-menu-item>
                    <el-menu-item index="/count/order">订单统计</el-menu-item>

                </el-menu-item-group>
            </el-submenu>
        </el-menu>
    </div>
</template>



<style lang="less" scoped>
.el-container {

    .el-submenu{
    width: 100%;
}
    .left_nav {

        .el-menu {
            border: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    
    .el-submenu__title{
            width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
        }
        }
        .el-menu-item{
            width: 100%;
            background-color: salmon;

        }
        .top_title {
            height: 80px;
            line-height: 80px;
            border-bottom: 1px solid #fff;

            h2 {
                display: flex;
                align-items: center;
                justify-content: space-around;
                font-size: 18px;
                font-weight: bold;
                color: #fff;
            }



        }

    }
    .el-submenu__title{
            width: 100%;
    display: flex ;
    align-items: center;
    justify-content: flex-start;
        }
}
</style>